<template>
  <div class="m-head">
    <el-row class="head-bar">
      <el-col span="4" class="left">
        <router-link to="#" class="link">
          <img :src="logSrc" alt="" class="link-img">
        </router-link>
      </el-col>
      <el-col span="20" class="right">
        <ul class="head-nav">
          <li class="nav-item" v-for="(item,index) in headNav " :key="index">
            <router-link class="nav-link" :class="{active:item.active}" :to="item.href">
              {{item.text}}
            </router-link>
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import '@/assets/pub/head/head.styl'

  export default {
    data () {
      return {
        logSrc: 'https://waimai.meituan.com/static/img/new2018/header-logo-black.png',
        headNav: [
          {
            text: '首页',
            href: '',
            active: false
          },
          {
            text: '入驻加盟',
            href: '',
            active: false
          },
          {
            text: '开放平台',
            href: '',
            active: false
          },
          {
            text: '社会责任',
            href: '',
            active: false
          },
          {
            text: '点外卖',
            href: '',
            active: true
          },
          {
            text: '下载手机版',
            href: '',
            active: false
          }
        ]
      }
    }
  }
</script>
